<template>
  <div class="adminBox">
    <NavTabs msg="管理员"></NavTabs>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <div class="main">
        <div class="mangerInfo">
          <div class="userInfo">
            <div>管理员信息</div>
            <div class="timer">{{}}</div>
          </div>
          <!-- <AlterPassword msg="5515" dialogShow=true></AlterPassword> -->
          <div class="nameaccount">
            <div>姓名：{{ userInfo.name }}</div>
            <div>账号：{{ userInfo.account }}</div>
          </div>
        </div>
        <van-divider
          :style="{
            color: '#1989fa',
            borderColor: '#1989fa',
            padding: '0 16px',
          }"
        >
          功能查询</van-divider
        >
        <div class="actionCard">
          <!-- 查询成绩 -->
          <div class="boxs">
            <div class="iconBox" @click="queryStudentInfo">
              <van-icon name="friends-o" />
            </div>
            <span>查询成绩</span>
          </div>
<!-- 编辑成绩 -->
          <div class="boxs">
            <div class="iconBox" @click="SetScoreShow = true">
              <van-icon name="edit" />
            </div>
            <span>编辑成绩</span>
          </div>
<!-- 删除成绩 -->
          <div class="boxs">
            <div class="iconBox" @click="delScoreShow=true">
              <van-icon name="delete-o" />
            </div>
            <span>删除成绩</span>
          </div>
          <!-- 导入信息 -->
          <div class="boxs">
            <div class="iconBox">
              <van-uploader :before-read="beforeRead" :after-read="afterRead">
                <van-icon name="back-top" />
              </van-uploader>
            </div>
            <span @click="showPickerYear = true">导入信息</span>
            <p style="margin-left: -1rem; font-size:10px">选择年份：{{ yearsValue }}</p>
          </div>
          <!-- 重置密码 --> 
          <div class="boxs">
            <div class="iconBox">
              <van-icon name="replay" @click="restPasswordShow=true" />
            </div>
            <span>重置密码</span>
        
          </div>
          <!-- 修改密码 -->
          <div class="boxs">
            <div
              class="iconBox"
              @click="
                () => {
                  SetPasswordShow = true;
                }
              "
            >
              <van-icon name="points" />
            </div>
            <span>修改密码</span>
          </div>
          <div class="boxs">
            <div class="iconBox" @click="quitLogin">
              <van-icon name="revoke" />
            </div>
            <span>退出登录</span>
          </div>
        </div>
      </div>
      <!-- 查询学生成绩 -->
      <van-dialog
        confirm-button-text="查询"
        @confirm="confirmQuery"
        @cancel="Queryshow = false"
        :show="Queryshow"
        title="查询学生成绩"
        show-cancel-button
      >
        <div class="inputSearch">
          <van-field
            v-model="account"
            label="请输入学号:"
            placeholder="点击输入学号"
          />
          <van-field
            v-model="yearsValue"
            is-link
            readonly
            name="picker"
            label="学年"
            placeholder="点击选择学年"
            @click="showPickerYear = true"
          />
        </div>
      </van-dialog>
      <!-- 年份选择 -->
      <van-popup :show="showPickerYear" position="bottom">
        <van-picker
          :columns="years"
          @confirm="onConfirm"
          @cancel="cancelYear"
        />
      </van-popup>
      <!-- 修改密码 -->
      <van-dialog
        confirm-button-text="修改"
        @confirm="alterPassword"
        @cancel="SetPasswordShow = false " 
        :show="SetPasswordShow"
        title="修改密码"
        show-cancel-button
      >
        <div class="inputSearch">
          <van-field v-model="setPssword.username" label="姓名:" disabled />
          <van-field v-model="setPssword.account" label="学号:" disabled />
          <van-field
            type="password"
            v-model="setPssword.password1"
            label="新密码:"
          />
          <van-field
            type="password"
            v-model="setPssword.password2"
            label="确认新密码:"
          />
        </div>
      </van-dialog>
    </van-pull-refresh>
    <!-- 编辑学生成绩 -->

    <!-- 编辑学生成绩 -->
    <van-dialog
      confirm-button-text="确认"
      @confirm="editScore"
      @cancel="SetScoreShow = false"
      :show="SetScoreShow"
      title="新增/修改学生成绩"
      show-cancel-button
    >
      <div class="inputSearch">
        <van-field
          v-model="account"
          label="请输入学号:"
          placeholder="点击输入学号"
        />
        <van-field
          v-model="yearsValue"
          is-link
          readonly
          name="picker"
          label="学年"
          placeholder="点击选择学年"
          @click="showPickerYear = true"
        />
      </div>
    </van-dialog>
   <van-dialog
        confirm-button-text="重置学生密码"
        @confirm="resPassword"
        @cancel="restPasswordShow = false " 
        :show="restPasswordShow"
        title="重置学生密码"
        show-cancel-button
      >
        <div class="inputSearch">
         
          <van-field v-model="restPassword.username " label="姓名:" />
            <van-field v-model="restPassword.account" label="学号:" />
        </div>
      </van-dialog>
    <!-- 删除学生信息 -->

        <van-dialog
      confirm-button-text="确认"
      @confirm="delScore"
      @cancel="delScoreShow = false "
      :show="delScoreShow"
      title="删除学生成绩"
      show-cancel-button
    >
      <div class="inputSearch">
        <van-field
          v-model="account"
          label="请输入学号:"
          placeholder="点击输入学号"
        />
        <van-field
          v-model="yearsValue"
          is-link
          readonly
          name="picker"
          label="学年"
          placeholder="点击选择学年"
          @click="showPickerYear = true"
        />
      </div>
    </van-dialog>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "@vue/runtime-core";
import { Toast, PullRefresh, Dialog } from "vant";
import NavTabs from "../components/NavTabs.vue";
// import AlterPassword from "../components/AlterPassword.vue"
import { info, fileUp, SetPassword,delScoreInfo,adminrestPassword } from "../request/api";
import { useRouter, useRoute } from "vue-router";
// 用户信息
const userInfo = ref<any>({});
const SetScoreShow = ref<boolean>(false);
const restPassword=ref<any>({
  username:"",
  account:""
})
//年份选择
const yearsValue = ref("");
const showPickerYear = ref<boolean>(false);
const restPasswordShow = ref<boolean>(false)
const delScoreShow =ref<boolean>(false)
const years = [];
const onConfirm = (value) => {
  // console.log(value);
  yearsValue.value = value;
  showPickerYear.value = false;
};
//修改密码
const setPssword = ref<any>({
  username: "",
  account: "",
  password1: "",
  password2: "",
});
const router = useRouter();
const route = useRoute();
//查询弹窗
const Queryshow = ref<boolean>(false);
//修改密码弹窗
const SetPasswordShow = ref<boolean>(false);
// 用户名
const account = ref<string>("");
//文件名
const xlsxName = ref<string>("");
// 刷新
const loading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    Toast("刷新成功");
    loading.value = false;
  }, 500);
};

//——————上传文件————————————
const beforeRead = (file) => {
  // console.log(file.type);
  if (
    file.type ==
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"||file.type=="application/vnd.ms-excel"
  ) {
   return true
  } else if (yearsValue.value == "") {
    Toast("请先选择年份");
  } else {
     Toast("请上传 xlsl 格式表格");
    return false;
   
  }
};
// const toast = Toast.loading({
//   duration: 0,
//   forbidClick: true,
//   message: '上传中...',
// });

// let second = 3;
// const timer = setInterval(() => {
//   second--;
//   if (second) {
//     toast.message = `倒计时 ${second} 秒`;
//   } else {
//     clearInterval(timer);
//     Toast.clear();
//   }
// }, 1000);

const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  // console.log(file);
  // console.log(file.file);
  xlsxName.value = file.name;
  const formData = new FormData();
  // formData.append("file", file.File);
  formData.append("file",file.file)
  formData.append("schoolYear",yearsValue.value)
  // console.log(typeof formData);
 
  fileUp(formData)
    .then((res) => {
      // console.log(res);
        Toast.loading("上传中请稍等");
      setTimeout(() => {
        if (res.data.code == "200") {
          Toast.success("导入成功");
        } else {
          Toast.fail("导入失败");
        }
      }, 1000);
    })
    .catch((err) => {
      Toast.fail("请求超时");
    });
};

//——————————————————————
onMounted(() => {
  userInfo.value = route.query;
  setPssword.value.username = route.query.name;
  setPssword.value.account = route.query.account;
  const nowYear=new Date()
  let nowYearArr:any=nowYear.getFullYear()
  for(let i=2019;i<=nowYearArr;i++){
      years.push(i.toString())
  }
  years.reverse()
  
});
function queryStudentInfo() {
  Queryshow.value = true;
}
function confirmQuery() {
  if (account.value != "") {
    searchInfo(account.value,yearsValue.value)
      .then((res) => {
        if (res.data.data != null) {
          Toast.loading("查询中请稍等");
          setTimeout(() => {
            router.push({ path: "/grade", query: { account: account.value,schoolYear:yearsValue.value } });
          }, 1000);
        } else {
          Toast.fail("查询失败");
        }
      })
      .catch((err) => {
        Toast.fail("请求超时");
      });
  } else  {
  Toast.fail("请输入姓名和学年");
  // setTimeout(()=>{
  //    router.push({ path: "/allscore", query: {schoolYear:yearsValue.value } }); 
  // },500)
    
   
  }
}
function alterPassword() {
  // console.log(setPssword.value.username);

  if (
    setPssword.value.username !== "" &&
    setPssword.value.account !== "" &&
    setPssword.value.password1 !== "" &&
    setPssword.value.password2 !== ""
  ) {
    SetPassword(setPssword.value).then((res) => {
      // console.log(res);
      if (res.data.code === "200") {
        Toast.success(res.data.msg);
        SetPasswordShow.value = false;
        setTimeout(() => {
          quitLogin();
        }, 1000);
      } else {
        Toast.fail(res.data.msg);
      }
    });
  } else {
    Toast.fail("请填入完整数据");
  }
}
// 导出文件
function adminReasPassword(){
//  console.log(666);
 
  
} 
//编辑学生信息
function editScore() {
  if (yearsValue.value == "" || account.value == "") {
    Toast.fail("请输入学号和年份");
  } else {
    SetScoreShow.value = false;

    router.push({
      path: "/editescore",
      query: { years: yearsValue.value, account: account.value },
    });
  }
}
//删除学生信息
function delScore(){
     if (yearsValue.value == "" || account.value == "") {
    Toast.fail("请输入学号和年份");
  } else {
  delScoreInfo({account:account.value,schoolYear:yearsValue.value}).then(res=>{
    if(res.data.data==true){
        Toast.success("删除成功")
        delScoreShow.value=false
    }
    else{
      Toast.fail("删除失败")
    }
    
  })
  }
    
}
//重置密码
function resPassword(){
  // console.log(restPassword.value);
  adminrestPassword(restPassword.value).then(res=>{
    // console.log(res.data.code);
    if(res.data.code=="200"){
      Toast.success("重置成功")
      restPasswordShow.value=false
    }else{
      Toast.fail("重置失败")
    }
  })
  
} 
//退出登录
function quitLogin() {
  localStorage.removeItem("token");
  localStorage.removeItem("role");
  localStorage.removeItem("account");

  Toast.success("退出成功");
  setTimeout(() => {
    router.push({ path: "/login" });
  }, 1000);
}
//年份清楚
 function cancelYear(){
  showPickerYear.value=false
  yearsValue.value=""
 }
//搜索信息
async function searchInfo(nameaccount: string, schoolYear: string) {
  try {
    const { data } = await info(nameaccount, schoolYear);
    // console.log(data);
    return data;
  } catch (error) {}
}
//获取信息
// async function getUserInfo() {
//   try {
//     const { data } = await info(localStorage.getItem("account"));
//     // userInfo = _data;
//     console.log(data);
//     userInfo.value = data.data;
//     console.log(userInfo);
//   } catch (error) {}
// }
</script>
<style lang="less" scoped>


.adminBox {
  padding: 0rem 1rem;
  
  .main {
    height: 40rem;
    .mangerInfo {
      height: 4rem;
      white-space: nowrap;
      // background-color: aqua;
      padding: 1rem;
      overflow: hidden;
      margin: 1.3rem 1rem;
      border-radius: 0.8rem;
      box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem gainsboro;
      .nameaccount {
        display: flex;
        justify-content: space-around;
        margin-top: 00.5rem;
      }
      .userInfo {
        display: flex;
        justify-content: space-between;
        padding-bottom: 0.8rem;
        border-bottom: gainsboro 0.01rem solid;
        .timer {
          font-size: 00.5rem;
          color: #888888;
        }
      }
    }
    .actionCard {
      height: 22rem;
      //   white-space: nowrap;
      // background-color: aqua;
      padding: 1rem;
      overflow: hidden;
      margin: 1.3rem 1rem;
      border-radius: 0.8rem;
      box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem gainsboro;
      display: flex;
      flex-wrap: wrap;
      //   justify-content: space-between;
      .boxs {
        margin: 1rem 0.9rem;
        width: 4rem;
        height: 4rem;
        background-color: #888888;
        font-size: 0.2rem;
        text-align: center;
        border-radius: 0.6rem;
        white-space: nowrap;
        span {
          margin-left: -0.2rem;
          font-size: 10px;
          color: #888888;
        }

        .iconBox {
          font-size: 2rem;
          text-align: center;
          line-height: 4rem;
          margin-bottom: 0.2rem;

          // background-color: aliceblue;
        }
      }

      .boxs:nth-child(1) {
        background-color: #b4fee4;
      }
      .boxs:nth-child(2) {
        background-color: #a4aee4;
      }
      .boxs:nth-child(3) {
        background-color: #e47470;
      }
      .boxs:nth-child(4) {
        background-color: #e3fe37;
      }
      .boxs:nth-child(5) {
        background-color: #b4cd16;
      }
      .boxs:nth-child(6) {
        background-color: #fbe6e2;
      } 
       .boxs:nth-child(7) {
        
        background-color: #f8674b;
      }
    }
  }
  
  @media screen and (max-width: 375px) {
  }
}
</style>
